<!--
 * @Author: ww
 * @LastEditors: ww
 * @description:
 * @updateInfo:
 * @Date: 2023-05-19 10:26:50
 * @LastEditTime: 2023-06-02 11:24:02
-->
<script lang="ts" setup name="SelectionTenant">
import type { PropType } from 'vue'
import { ref } from 'vue'
import { ikStore } from 'iking-utils'
import type { tenant } from './interface'
const props = defineProps({
  tenantList: {
    type: Object as PropType<{ tenantList: any; userList: any; } | null>,
    default: () => null
  }
})
const emits = defineEmits<{
  (event: 'onChange', value: tenant): void
}>()
const list = ref<Array<tenant>>(props.tenantList?.tenantList || [])
const localTenant = ref<tenant>(ikStore.local.getItem(ELocal.TENANT))
const tenantUserList = ref<Array<any>>(props.tenantList?.userList || [])
const choiceTenant = (item: tenant) => {
  emits('onChange', item)
}
watch(
  () => props.tenantList,
  async item => {
    if (item) {
      list.value = item?.tenantList || []
      tenantUserList.value = item?.userList || []
    }
  }
)
watch(
  () => ikStore.local.getItem(ELocal.TENANT),
  async item => {
    if (item)
      localTenant.value = item
  }
)
</script>

<template>
  <div class="tenant-box">
    <ul v-show="list.length > 0" class="menu-sub">
      <li
        v-for="(item, index) in list"
        :key="index"
        :class="[!item.normal ? 'tenant-freeze' : 'tenant-select', localTenant?.name === item.name ? 'tenant-checked' : ''].join(' ')"
        @click="choiceTenant(item)"
      >
        {{ item?.name }}
      </li>
    </ul>
    <div v-show="tenantUserList.length > 0" class="menu-sub">
      <el-alert title="抱歉，您没有系统操作权限，请联系系统管理员为您授权" type="error" :closable="false" />
      <el-table :data="tenantUserList" style="width: 100%;" class="tenantuser-table">
        <el-table-column
          prop="tenantName"
          label="租户名称"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column prop="name" label="用户名" show-overflow-tooltip />
        <el-table-column prop="phone" width="120" label="电话" />
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tenant-box{
  padding: 20px !important;

  .menu-sub {
    font-size: 14px;
    font-weight: 400;
    height: 415px;
    overflow: hidden auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    .tenant-select {
      padding: 10px;
      width: 100%;
      background: #fafafa;
      box-shadow: 0 1px 1px 1px #c5c9d845;
      border-radius: 2px;

      &:hover {
        background-color: #cbe6ff;
        color: #1890ff;
      }
    }

    .tenant-checked{
      background-color: #cbe6ff;
      color: #1890ff;
      border-radius: 2px;
      padding: 10px;
      width: 100%;
    }

    .tenant-freeze{
      padding: 10px;
      width: 100%;
      background: #fafafa;
      box-shadow: 0 1px 1px 1px #c5c9d845;
      border-radius: 2px;

      &:hover {
        background-color: #fafafa !important;
        color: #222b45 !important;
      }
    }

    .tenantuser-table{
      margin-top: 10px;
    }
  }
}
</style>
